<div id="getarea<?php echo $uniqid;?>" style="padding-top: 20px">
  <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
  </el-input>
  <el-tree
          class="filter-tree"
          :data="allAreaTree"
          :props="defaultProps"
          :filter-node-method="filterArea"
          show-checkbox
          node-key="id"
          ref="tree"
          highlight-current
          accordion
          @check-change="areaCheckChange"
          :default-checked-keys="defaultCheckedKeys">
  </el-tree>
</div>

<script>
  var storeGetAreaVm = new Vue({
    el: '#getarea<?php echo $uniqid;?>',
    data: {
      selectAreas: 'undefined' !== typeof storeEditVm? storeEditVm.currentSelectAreaRows:JSON.parse('<?php echo addslashes($selectAreas);?>'),
      allAreaTree:JSON.parse('<?php echo addslashes($allAreaTree);?>'),
      checked_prov:[],
      checked_city:[],
      checked_area:[],
      defaultCheckedKeys:[],
      defaultProps: {
        children: 'children',
        label: 'name',
        pid:'pid',
        level:'level'
      },
      filterText: '',
    },
    mounted(){
      this.init();
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      init(){
        if(this.selectAreas.length){
          this.defaultCheckedKeys.length = 0;
          this.checked_prov.length = 0;
          this.checked_city.length = 0;
          this.checked_area.length = 0;
          for (let i = 0; i < this.selectAreas.length; i++){
            this.defaultCheckedKeys.push(this.selectAreas[i].id);
            if(this.selectAreas[i].level === 1){
              this.checked_prov.push(this.selectAreas[i].id);
            }
            if(this.selectAreas[i].level === 2){
              this.checked_city.push(this.selectAreas[i].id);
            }
            if(this.selectAreas[i].level === 3){
              this.checked_area.push(this.selectAreas[i].id);
            }
          }
          this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
        }
      },
      filterArea(value, data){
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      areaCheckChange(node, check_status, has_child){
        let that = this;
        if(check_status){
          if(node.level === 1){
            that.check_level_1(node);
            if(node.children.length){
              $.each(node.children, function (city_index, city_item) {
                that.un_check_level_2(city_item);
                if(city_item.children.length){
                  $.each(city_item.children, function (area_index, area_item) {
                    that.un_check_level_3(area_item);
                  });
                }
              });
            }
          }else if(node.level === 2){
            that.check_level_2(node);
            if(node.children.length){
              $.each(node.children, function (area_index, area_item) {
                that.un_check_level_3(area_item);
              });
            }
          }else{
            that.check_level_3(node);
          }
        }else{
          if(node.level === 1){
            that.un_check_level_1(node, has_child);
          }else if(node.level === 2){
            that.un_check_level_2(node, has_child);
          }else{
            that.un_check_level_3(node);
          }
        }
      },
      check_level_1(node){
        if($.inArray(node.id, this.checked_prov) === -1){
          this.checked_prov.push(node.id);
        }
      },
      un_check_level_1(node, has_child = false){
        let that = this;
        let prov_has_key = $.inArray(node.id, that.checked_prov);
        if(prov_has_key > -1){
          that.checked_prov.splice(prov_has_key, 1);
        }
        if(has_child){
          if(node.children.length){
            $.each(node.children, function (i, city_item) {
              if(that.$refs.tree.getNode(city_item.id).checked){
                that.check_level_2(city_item);
              }
              $.each(city_item.children, function (i, area_item) {
                if(that.$refs.tree.getNode(area_item.id).checked){
                  that.check_level_3(area_item);
                }
              });
            });
          }
        }
      },
      check_level_2(node){
        if($.inArray(node.pid, this.checked_prov) === -1){
          if($.inArray(node.id, this.checked_city) === -1){
            this.checked_city.push(node.id);
          }
        }
      },
      un_check_level_2(node, has_child = false){
        let that = this;
        let city_has_key = $.inArray(node.id, that.checked_city);
        if(city_has_key > -1){
          that.checked_city.splice(city_has_key, 1);
        }
        if(has_child){
          if(node.children.length){
            $.each(node.children, function (i, area_item) {
              if(that.$refs.tree.getNode(area_item.id).checked){
                that.check_level_3(area_item);
              }
            });
          }
        }
      },
      check_level_3(node){
        let node_prov_id = 0;
        $.each(storeEditVm.city, function (i, city) {
          if (node.pid === city.id){
            node_prov_id = city.pid;
            return false
          }
        });
        if($.inArray(node_prov_id, this.checked_prov) === -1){
          if($.inArray(node.pid, this.checked_city) === -1){
            if($.inArray(node.id, this.checked_area) === -1){
              this.checked_area.push(node.id);
            }
          }
        }
      },
      un_check_level_3(node){
        let area_has_key = $.inArray(node.id, this.checked_area);
        if(area_has_key>-1){
          this.checked_area.splice(area_has_key, 1);
        }
      },
      submitArea(){
        if(this.checked_prov.length || this.checked_city.length || this.checked_area.length){
          if('undefined' !== typeof storeEditVm){
            let that = this;
            storeEditVm.currentSelectAreaIds.length = 0;
            storeEditVm.currentSelectAreaRows.length = 0;
            if(that.checked_prov.length){
              $.each(that.checked_prov, function (i, prov_id) {
                $.each(storeEditVm.prov, function (i, prov) {
                  if (prov_id === prov.id){
                    storeEditVm.currentSelectAreaIds.push(prov_id);
                    storeEditVm.currentSelectAreaRows.push(prov);
                    return false
                  }
                });
              });
            }
            if(that.checked_city.length){
              $.each(that.checked_city, function (i, city_id) {
                $.each(storeEditVm.city, function (i, city) {
                  if (city_id === city.id){
                    storeEditVm.currentSelectAreaIds.push(city_id);
                    storeEditVm.currentSelectAreaRows.push(city);
                    return false
                  }
                });
              });
            }
            if(that.checked_area.length){
              $.each(that.checked_area, function (i, area_id) {
                $.each(storeEditVm.area, function (i, area) {
                  if (area_id === area.id){
                    storeEditVm.currentSelectAreaIds.push(area_id);
                    storeEditVm.currentSelectAreaRows.push(area);
                    return false
                  }
                });
              });
            }
            $("#storeEditdlg").dialog('close');
          }else{
            $.messager.alert('提示', '门店添加/编辑页面被关闭，请打开后重试','warning');
          }
        }else{
          $.messager.alert('提示', '您没有选择行政区域','warning');
        }
      }
    }
  });
  $('#storeAreasubmit').click(function(data){
    storeGetAreaVm.submitArea();
  });
</script>
<style>
  .zindex_popper{
    z-index: 20000 !important;
  }
</style>